<template>
  <!-- 主页面 -->
  <div class="app">
    <dv-border-box-11
      title="动态监管工作站 云蓝风汇生态观测管理V1"
      :titleWidth="400"
    >
      <div class="app-header">
        <div class="app-header-logo"></div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar :src="header" />
            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="screen" :icon="SwitchButton"
                >大屏幕</el-dropdown-item
              >
              <el-dropdown-item command="info" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="resetPassword" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <!-- 当用户为管理员时该功能才能使用 -->
              <el-dropdown-item command="uploadData"  v-if="isAdmin" :icon="EditPen"
                >上传数据</el-dropdown-item
              >
              <el-dropdown-item command="birdIdentify"  v-if="isAdmin" :icon="EditPen"
                >鸟类识别系统</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="app-container">
        <router-view></router-view>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
} from "@element-plus/icons-vue";
import header from "@/assets/header.jpg";
import { userInfoService } from "@/api/user.js";
import { ref } from "vue";
import useUserInfoStore from "@/stores/userInfo.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTokenStore } from "@/stores/token.js";

// 获取token
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();

// 增加一个响应式变量用于存储是否是管理员的状态
const isAdmin = ref(false);

// 获取用户信息存储到Pinia中，并检查用户名是否为'abcabc'
const getUserInfo = async () => {
  let result = await userInfoService();
  userInfoStore.setInfo(result.data);
  console.log(result.data);
  // 检查用户名是否为'Administrator'
  if (result.data.username === 'admin') {
    isAdmin.value = true;
  }
};

// 获取用户信息
getUserInfo();

// 定义路由
import { useRouter } from "vue-router";
const router = useRouter();

// 定义command事件处理函数
const handleCommand = (command) => {
  if (command === "logout") {
    // 跳转到登录页面
    // 首先提示用户是否退出
    ElMessageBox.confirm("您确认要退出吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        // 清空pinia中的用户信息
        userInfoStore.removeInfo();
        // 清空token
        tokenStore.removeToken();
        router.push("/login");
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消退出",
        });
      });
  } else {
    // 跳转到对应的页面
    const targetPath = `/layout/${command}`;
    if (router.currentRoute.value.path !== targetPath) {
      // 只有当前路径不等于目标路径时才跳转
      router.push(targetPath);
    }
  }
};
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  background: url("@/assets/screen/bg4.webp") no-repeat center center / cover;
  .app-header {
    height: 8%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    align-content: center;
    .app-header-logo {
      height: 2vw;
      width: 10vw;
      background: url("@/assets/logo.png") no-repeat right 20% / 18vh auto;
    }
    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 1vh;
      }

      &:active,
      &:focus {
        outline: none;
      }
      .el-menu {
        border-right: none;
      }
    }
  }
  .app-container {
    height: 90%;
    display: flex;
    margin: 0 1% 1% 1%;
  }
}
</style>